<template>
  <div id="oftenRace">
    <h1 class="titleTag">常跑路线</h1>
    <el-form :inline="true" class="formone">
      <el-form-item>
        <el-input
          v-model="searchAddress"
          placeholder="请输入发货地址"
          size="small"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button size="small" @click="searchAddress = ''">清空</el-button>
      </el-form-item>
      <el-form-item>
        <el-button size="small" @click="addTo">新增</el-button>
      </el-form-item>
      <el-form-item>
        <el-button size="small" @click="delArray()">删除</el-button>
      </el-form-item>
    </el-form>
    <div class="tableDetail">
      <el-table
        ref="multipleTable"
        :data="tableData"
        height="520"
        style="width: 100%;"
      >
        <el-table-column width="55">
          <template scope="scope">
            <el-radio
              @change.native="getTemplateRow(scope.$index, scope.row)"
              v-model="radioIndex"
              :label="scope.row.id"
            ></el-radio>
          </template>
        </el-table-column>
        <el-table-column label="发货人" min-width="270">
          <template slot-scope="data">
            <div class="fb">
              <span>发货人姓名</span><span>{{ data.row.send_name }}</span>
            </div>
            <div class="fb">
              <span>发货人手机号</span><span>{{ data.row.send_phone }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="发货地址" min-width="270">
          <template slot-scope="data">
            <div style="text-align: left">
              {{
                data.row.send_province + data.row.send_city + data.row.send_area
              }}
            </div>
            <div style="text-align: left">{{ data.row.send_address }}</div>
          </template>
        </el-table-column>
        <el-table-column label="收货人" min-width="270">
          <template slot-scope="data">
            <div class="fb">
              <span>收货人姓名</span><span>{{ data.row.receive_name }}</span>
            </div>
            <div class="fb">
              <span>收货人手机号</span><span>{{ data.row.receive_phone }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="收货地址" min-width="270">
          <template slot-scope="data">
            <div style="text-align: left">
              {{
                data.row.receive_province +
                  data.row.receive_city +
                  data.row.receive_area
              }}
            </div>
            <div style="text-align: left">{{ data.row.receive_address }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- <div class="footer">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="50"
        :size="10"
      ></el-pagination>
      <button class="btn" @click="adressSure()">确定</button>
    </div> -->

    <!-- 新增地址 -->
    <div class="addAddress">
      <el-dialog title="新增地址" :visible.sync="addAddressDialog" center>
        <el-form label-position="left" :model="sendMes" :rules="rules" label-width="90px" ref='ruleForm'>
          <el-row>
            <el-row :gutter="50">
              <p style="padding-left: 25px; line-height: 40px;">发货地</p>
              <el-col :span="12">
                <el-form-item label="姓名" prop="addName">
                  <el-input v-model="sendMes.addName" placeholder="请输入联系人姓名" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label-width="110px" label="手机号码" prop="addPhone">
                  <el-input v-model="sendMes.addPhone" placeholder="请输入联系人手机号" size="small"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-col :span="24">
              <city @getProvince="getProvince" @getCity="getCity" @getArea="getArea" title="发货地址"/>
            </el-col>
            <el-col :span="24">
              <el-form-item label="详细地址" prop="addAddress">
                <el-input v-model="sendMes.addAddress"  placeholder="请输入详细地址" size="small"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-row :gutter="50">
              <p style="padding-left: 25px; line-height: 40px;">收货地</p>
              <el-col :span="12">
                <el-form-item label="姓名" prop="addName2">
                  <el-input v-model="sendMes.addName2" placeholder="请输入联系人姓名" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label-width="110px" label="手机号码" prop="addPhone2">
                  <el-input v-model="sendMes.addPhone2" placeholder="请输入联系人手机号" size="small"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-col :span="24">
              <city @getProvince="getProvince" @getCity="getCity" @getArea="getArea" title="收货地址"/>
            </el-col>
            <el-col :span="24">
              <el-form-item label="详细地址" prop="addAddress2">
                <el-input v-model="sendMes.addAddress2"  placeholder="请输入详细地址" size="small"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="submitBUTTON">
          <div><button @click="preserve">确定</button></div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import city from "@/components/city";
export default {
  name: "oftenRace",
   components: {
    city
  },
  data() {
    return {
      addAddressDialog: false,
      searchAddress: "",
      tableData: [
        {
          send_name: "你好",
          send_phone: "18888888888",
          send_province: "山西省",
          send_city: "临汾市",
          send_area: "冀城县",
          send_address: "唐兴镇陵下村鼓楼西33号",
          receive_name: "世界",
          receive_phone: "16666666666",
          receive_province: "贵州省",
          receive_city: "贵阳市",
          receive_area: "云岩区",
          receive_address: "汇金星力城",
          id: "1"
        },
        {
          send_name: "你好0",
          send_phone: "18888888888",
          send_province: "山西省",
          send_city: "临汾市",
          send_area: "冀城县",
          send_address: "唐兴镇陵下村鼓楼西33号",
          receive_name: "世界",
          receive_phone: "16666666666",
          receive_province: "贵州省",
          receive_city: "贵阳市",
          receive_area: "云岩区",
          receive_address: "汇金星力城",
          id: "2"
        }
      ],
      multipleSelection: [],
      radioData: {}, //选中数据
      radioIndex: "", //选中id
      sendMes: {
        //新增地址
        addName: "",
        addPhone: "",
        addAddress: "",
        addName2: "",
        addPhone2: "",
        addAddress2: "",
      },
      rules: {
        addName: [{ required: true, message: "请输入姓名", trigger: "blur" },{pattern: /^[\u2E80-\u9FFF]+$/,  message: "请输入汉字", trigger: "blur"}],
        addAddress: [{ required: true, message: "请输入详细地址", trigger: "blur" }],
        addPhone: [{ required: true, message: "请输入手机号", trigger: "blur" },{pattern:/^\d{11}$/,message:'手机号格式不符',trigger:'blur'}],
        addName2: [{ required: true, message: "请输入姓名", trigger: "blur" },{pattern: /^[\u2E80-\u9FFF]+$/,  message: "请输入汉字", trigger: "blur"}],
        addAddress2: [{ required: true, message: "请输入详细地址", trigger: "blur" }],
        addPhone2: [{ required: true, message: "请输入手机号", trigger: "blur" },{pattern:/^\d{11}$/,message:'手机号格式不符',trigger:'blur'}],
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    // 批量清除
    delArray() {
      const val = this.multipleSelection;
      // 如果选中数据存在
      if (val) {
        // 将选中数据遍历
        val.forEach(item => {
          // 遍历源数据
          this.tableData.forEach((itemI, indexI) => {
            // 如果选中数据跟元数据某一条标识相等，删除对应的源数据
            if (item.send_name === itemI.send_name) {
              this.tableData.splice(indexI, 1);
            }
          });
        });
      }
      // 清除选中状态
      this.$refs.multipleTable.clearSelection();
    },
    // 获取点击行信息
    getTemplateRow(index, row) {
      this.radioData = row;
      this.radioIndex = row.id;
    },
    //新增
    addTo() {
      this.addAddressDialog = true;
    },
    // 接收省市区数据
    getProvince(val) {
      console.log(val);
      this.province = val;
    },
    getCity(val) {
      console.log(val);
      this.city = val;
    },
    getArea(val) {
      console.log(val);
      this.area = val;
    },
     //保存数据，暂时功能未完善
    preserve(){
      this.$refs.ruleForm.validate((valid)=>{
        if(valid){
          this.addAddressDialog=false;
          console.log('校验成功，发送请求')
        }
      })
    }
  }
};
</script>

<style lang="scss">
.tableDetail {
  .el-radio__label {
    display: none !important;
  }
  .el-radio {
    margin-left: 10px;
  }
}
</style>
<style lang="scss" scoped>
#oftenRace {
  min-height: 100%;
  background-color: #fff;
  padding: 24px;
  box-sizing: border-box;
  .tableDetail span {
    line-height: 35px;
  }
}
</style>
